<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>个人信息管理 - 快递管理系统</title>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<body>
    <div layout:fragment="content">
        <h2 class="mb-4">个人信息管理</h2>

        <!-- 个人资料部分 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">个人资料</h5>
            </div>
            <div class="card-body">
                <form id="profileForm">
                    <input type="hidden" id="userId" th:value="${user.id}">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名:</label>
                        <input type="text" class="form-control" id="username" th:value="${user.username}" required>
                        <div class="form-text">修改用户名后需要重新登录</div>
                    </div>
                    <div class="mb-3">
                        <label for="phoneNumber" class="form-label">手机号码:</label>
                        <input type="text" class="form-control" id="phoneNumber" th:value="${user.phoneNumber}" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱:</label>
                        <input type="email" class="form-control" id="email" th:value="${user.email}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="realName" class="form-label">真实姓名:</label>
                        <input type="text" class="form-control" id="realName" th:value="${user.realName}" required>
                    </div>
                    <button type="submit" class="btn btn-primary" id="saveProfileBtn">保存个人资料</button>
                    <div id="profileMessage" class="mt-3"></div>
                </form>
            </div>
        </div>

        <!-- 地址管理部分 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">收货地址管理</h5>
                <button class="btn btn-success btn-sm" id="addAddressBtn">
                    <i class="fas fa-plus"></i> 添加地址
                </button>
            </div>
            <div class="card-body">
                <div class="alert alert-info mb-3">
                    <i class="fas fa-info-circle me-2"></i>最多可添加5个收货地址，只能有一个默认地址
                </div>
                <div id="addressList">
                    <div th:if="${#lists.isEmpty(addresses)}" class="text-muted text-center">
                        暂无收货地址，请添加一个地址
                    </div>
                    <div th:each="address : ${addresses}" class="card mb-3 address-card" th:data-address-id="${address.id}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <h6 class="card-title">
                                        地址 #<span th:text="${address.id}"></span>
                                        <span th:if="${address.isDefault == true}" class="badge bg-primary ms-2">默认</span>
                                    </h6>
                                    <p class="card-text" th:text="${address.address}">
                                    </p>
                                </div>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-sm btn-outline-primary edit-address-btn" th:data-address-id="${address.id}">编辑</button>
                                    <button th:if="${address.isDefault == null or address.isDefault == false}" class="btn btn-sm btn-outline-success set-default-btn" th:data-address-id="${address.id}">设为默认</button>
                                    <button class="btn btn-sm btn-outline-danger delete-address-btn" th:data-address-id="${address.id}">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 更改密码部分 -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">更改密码</h5>
            </div>
            <div class="card-body">
                <form id="changePasswordForm">
                    <div class="mb-3">
                        <label for="oldPassword" class="form-label">旧密码:</label>
                        <input type="password" class="form-control" id="oldPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">新密码:</label>
                        <input type="password" class="form-control" id="newPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="confirmNewPassword" class="form-label">确认新密码:</label>
                        <input type="password" class="form-control" id="confirmNewPassword" required>
                    </div>
                    <button type="submit" class="btn btn-warning" id="changePasswordBtn">更改密码</button>
                    <div id="passwordMessage" class="mt-3"></div>
                </form>
            </div>
        </div>

        <!-- 地址添加/编辑模态框 -->
        <div class="modal fade" id="addressModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addressModalTitle">添加地址</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addressForm">
                            <input type="hidden" id="addressId">
                            <div class="mb-3">
                                <label for="addressText" class="form-label">详细地址:</label>
                                <textarea class="form-control" id="addressText" rows="4" placeholder="请输入完整的收货地址，包括收件人、手机号、省市区县和详细地址" required></textarea>
                                <div class="form-text">
                                    示例：张三 13800138000 北京市朝阳区大望路SOHO现代城B座1001室
                                </div>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="isDefault">
                                <label class="form-check-label" for="isDefault">设为默认地址</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveAddressBtn">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <script th:src="@{/js/profile.js}"></script>
    </div>
</body>
</html> 